// import React from 'react'  // 组件中如果没有使用到React, 可以选择不引入
import React, {Component} from 'react'
import CompTest from './components/CompTest'
import CompTest2 from './components/CompTest2'

/* 
React内部有些暴露语法
export const Component = 类
export default {
  Component: Component,
  ...
}
*/

/* 应用根组件: 最外层的组件 */
// 函数组件
// function App() {
//   return (
//     <div>App</div>
//   )
// }

// 类组件
// class App extends React.Component {
class App extends Component {

  state = {count: 1}

  /* 1. 父组件: 定义更新state数据的函数, 并传递给子组件 */
  updateCount = (num) => {
    this.setState({count: this.state.count + num})
  }

  render () {
    const {count} = this.state
    return <div>
      <h2>App组件: {count}</h2>
      <button onClick={() => this.setState({count: count + 1})}>更新</button>
      {/* 父组件向子组件标签传递标签属性 */}
      {count<5 && <CompTest count={count} name="tom" updateCount={this.updateCount}/>}
      <CompTest2 myCount={count} updateCount={this.updateCount}></CompTest2>
    </div>
  }
}

export default App


/* 
子组件如何更新父组件的state数据
1. 父组件: 定义更新state数据的函数, 并传递给子组件
2. 子组件: 调用接收到prop函数
*/